<template>
  <a-table :columns="columns" :data-source="data" :pagination="true">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag v-for="tag in record.tags" :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import axios from 'axios'

const columns = [{
  name: '姓名',
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
}, {
  title: '地址',
  dataIndex: 'address',
  key: 'address',
}, {
  title: '标签',
  key: 'tags',
  dataIndex: 'tags',
}, {
  title: '操作',
  key: 'action',
}];

const data = ref([])

onMounted(() => {
  axios({
    url: '/api/products/list',
    method: 'get',
    // params: {
    //   page: 10
    // },
    headers: {
      'Content-Type': 'application/json'
    },
    data: {
      page: 10
    }
  })
    .then(result => {
      data.value = result.data.result
    })
})

</script>